<!DOCTYPE html>
<html>
<head>
  {include file="common/meta" /}
  {include file="common/link" /}
<style>
body { background-color: #fff!important; }
</style>
</head>
<body class="body-1">
<div id="container"> 
  <!--购物车为空-->
  {empty name="list"}
    <div class="mui-content "  style="height: 100%">
      <div class="shopping_null bgcolor-white" style="height: 100%;padding-bottom:100%;"> <i class="iconfont icon-gouwuchekong"></i>
        <p>购物车还是空的，快去逛逛吧！</p>
        <a href="{$turl}/web" class="go_buy_btn line_box">去逛逛</a> </div>
    </div>
  {else /}



  <!--购物车为空-->
    <div>
      <div id="footer" class=" mui-bar-tab cart-btn-box centerflex line-top" style="background-color: #333333;bottom: 50px;">
        <label>
          <input type="checkbox" value="1" class="checkall">
          全选</label>
        <div class="total-price box-flex-1">
          <p>共<em class="selectedNum">0</em>件商品</p>
          <p class="total">合计：<span class="allprice">0.00</span>元</p>
        </div>
        <a class="qujiesuan">结算</a> <span class="del-car" style="display: none;">删除</span>
      </div>


    <div class="">
      <div class="home-link-box bgcolor-white clearfix"><a href="javascript:void(0)" class="fl">
        <i class="iconfont icon-shop"></i></a>
        <div class="car-del fr"><span>删除</span></div>
      </div>
      <div id="car-list" class="car-list">
        <ul class="showcart">
            <!--  -->
          {volist name="list" id="vo"}
              <div class="weui-cell weui-cell_swiped catid{$vo.id}">
                <div class="weui-cell__bd" style="transform: translate3d(0px, 0px, 0px);">
                  <li class="display-box-middle weui-cell">
                    <label>
                      <input type="checkbox" value="{$vo.id}" class="checklist">
                    </label>
                    <div class="car-list-img " style="width: 80px">
                      <a href="###" class="link">
                        <img src="{$vo.image}" width="80px">
                      </a>
                    </div>
                    <div class="car-list-txt box-flex-1  ">
                      <a href="###" class="link">
                        <h2>{$vo.title}</h2>
                        <p class="d-specs">规格: {$vo.specs}</p>
                        <p><span class="line-top">品牌: {$vo.name}</span></p>
                      </a>
                      <div class="car-number clearfix"><span class="red-price fl"> ¥<em class="pro-price">{$vo.price}</em></span>
                        <div class="buy-select-num fr">
                          <div data-numbox-min="1" data-numbox-max="" class="mui-numbox line_box">
                            <button type="button" class="mui-btn mui-btn-numbox-minus line-right  " disabled>-</button>
                            <input type="tel" class="mui-input-numbox line-num" value="{$vo.num}" data-id="{$vo.id}">
                            <button type="button" class="mui-btn mui-btn-numbox-plus line-left">+</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </div>
                <div class="weui-cell__ft">
                  <a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:" style="display: flex;align-items: center;justify-content: center;" data-id="{$vo.id}"> 删除</a>
                </div>
              </div>
          {/volist}
          <div  style="height: 100px">
            <div class="weui-cell__bd" style="transform: translate3d(0px, 0px, 0px);">
              <li class="display-box-middle weui-cell">

              </li>
            </div>

          </div>
        </ul>
      </div>
    </div>
  </div>
  {/empty}
  <!--左侧扇形导航-->
  <!--左侧扇形导航-->
</div>
{include file="common/footer" /}
{include file="common/script" /}

</body>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
</html>
<script>
  $('.weui-cell_swiped').swipeout()
  $('.delete-swipeout').on('click',function () {
    console.log($(this).data('id'))
    var url = "{$turl}"+'/web/goods/del'
    $.post(url,{cart_id:$(this).data('id')},function (res) {
      layer.msg(res.msg)
      if(res.code>0){
        $('.catid'+res.data).remove()
      }
    })
  })
  //减少
  $('.line-right').on('click',function () {
      var num = $(this).next().val()
      var cart_id = $(this).next().data('id')
      if(num <=1){
        $(this).attr("disabled",true);
      }
    ajaxcart(cart_id,num)
    // console.log(num)
  })
  //增加
  $('.line-left').on('click',function () {
      var num = $(this).prev().val()
      var cart_id = $(this).prev().data('id')
      ajaxcart(cart_id,num)
  })
  $('.line-num').on('change',function () {
    var num = $(this).val()
    var cart_id = $(this).data('id')
    if(num <=1){
      $(this).attr("disabled",true);
      num = 1;
    }
    ajaxcart(cart_id,num)
  })
  function ajaxcart(cart_id,num) {
    var url = "{$turl}"+'/web/goods/updatecart'
    $.post(url,{cart_id:cart_id,num:num},function (res) {

    }).fail(function() {
      layer.msg('接口异常')
    })
  }
  $('body').on('click','.checklist',function () {
    countprice()
  })
  function countprice() {
    var price = 0;
    var num = 0;
    var is_all = 1;
    $('.weui-cell_swiped').each(function () {
      console.log('我我我我')
      if($(this).find('.checklist').prop("checked")){

          price = parseFloat(price)+parseFloat($(this).find('.pro-price').html()*1*$(this).find('.line-num').val())
          num =num*1 + $(this).find('.line-num').val()*1
      }else{
        is_all = 0;
      }
    })
    // console.log(is_all)
    if(is_all == 1){
      $('.checkall').prop("checked","checked")
    }else{
      $('.checkall').prop("checked","")
    }
    $('.selectedNum').html(num)
    $('.allprice').html(price)
  }
  $('.checkall').click(function () {
    if($(this).prop("checked")){
      $('.weui-cell_swiped').each(function () {
        if($(this).find('.checklist').prop("checked") == false){
          $(this).find('.checklist').prop("checked","checked")
        }
      })
    }else{
      $('.weui-cell_swiped').each(function () {
        if($(this).find('.checklist').prop("checked") == true){
          $(this).find('.checklist').prop("checked","")
        }
      })
    }
    countprice()
  })
  $('.qujiesuan').click(function () {
    is_true = 0;
    ids = new Array();
    $('.weui-cell_swiped').each(function () {
      if($(this).find('.checklist').prop("checked") == true){
        is_true =1;
        ids.push($(this).find('.checklist').val())
      }
    })
    if(is_true == 0){
      layer.msg('您尚未选择任何商品')
    }else{
      var url = "{$turl}"+'/web/customer/choose?ids='+ids.join("-");
      window.location.href = url
    }

  })
  $('.car-del').click(function () {
    is_true = 0;
    ids = new Array();
    $('.weui-cell_swiped').each(function () {
      if($(this).find('.checklist').prop("checked") == true){
        is_true =1;
        ids.push($(this).find('.checklist').val())
      }
    })
    if(is_true == 0){
      layer.msg('您尚未选择任何商品')
    }else{
      var url = "{$turl}"+'/web/goods/del'
        $.post(url,{cart_id:ids.join("-")},function (res) {
          layer.msg(res.msg)
          if(res.code>0){
            ss = res.data.split("-");
            for (var i = 0;i<ss.length;i++){
              $('.catid'+ss[i]).remove()
            }

          }
        })
    }
  })
</script>
<!---带扇形 不带footer->
